<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
  @import './static/iconfont/iconfont.css';
  
  page {
    background-color: #F8F8F8;
  }
  
  .root {
    margin-top: calc(85upx + var(--status-bar-height));
    
    .ui-title {
      padding: 20px 16px 16px;
      color: rgba(69, 90, 100, 0.6);
      font-weight: normal;
      font-size: 14px;
      line-height: 16px;
    }
  
    .ui-brief {
      padding: 0 16px 16px;
      color: rgba(69, 90, 100, 0.6);
      font-size: 13px;
      line-height: 1;
      margin-top: -10px;
    }
  }
  
  .skeleton {
    min-height: 35upx;
    animation: loading 2s ease infinite;
    border-radius: 10upx;
    -webkit-animation: loading 2s ease infinite;
    
    background-image: linear-gradient(
      90deg,
      #F3F4F6 25%,
      #E8E8E8 37%,
      #F3F4F6 63%
    );
    
    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(25%, #F3F4F6),
      color-stop(37%, #E8E8E8),
      color-stop(63%, #F3F4F6)
    );
    
    background-size: 400% 100%;
  
    &.skeletonAvatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  
  @keyframes loading {
    0% {
      background-position: 100% 50%;
    }
  
    to {
      background-position: 0 50%;
    }
  }
  
  @-webkit-keyframes loading {
    0% {
      background-position: 100% 50%;
    }
  
    to {
      background-position: 0 50%;
    }
  }
</style>
